<template>
	<div>
		<div class="top">
			<van-image
			  round
			  width="5rem"
			  height="5rem"
			  src="https://img.yzcdn.cn/vant/cat.jpeg"
			  @click="gz()"
			/>
			<div style="float: right; width: 70%;">
				<div class="name" @click="gz()">L  男</div>
				<van-cell title="摄影师 | 郑州市" value="个人主页" is-link to="index" />
			</div>
			
		</div>
	
		<div class="line">
			<van-row>
			  <van-col span="8" @click="coins()">{{xb}}<br/>星币</van-col>
			  <van-col span="8" @click="gz()">{{follow}}<br/>关注</van-col>
			  <van-col span="8" @click="fs()">{{fans}}<br/>粉丝</van-col>
			</van-row>
		</div>
		
		<div class="line">
			<div>
				<van-swipe :autoplay="3000">
				  <van-swipe-item v-for="(img, index) in images" :key="index">
				    <router-link :to="img.url">
						<img class="lbimg" :src="img.imgurl" />
					</router-link>
				  </van-swipe-item>
				</van-swipe>
			</div>

		</div>
		
		<div>
			<van-grid>
			  <van-grid-item icon="photo-o" text="作品相册" to="/" />
			  <van-grid-item icon="star-o" text="我的收藏" to="/" />
			  <van-grid-item icon="good-job-o" text="我的点赞" to="/" />
			  <van-grid-item icon="clock-o" text="浏览历史" to="/" />
			</van-grid>
		</div>
		
		<div class="line">
			<van-cell title="我的约拍" value="" icon="video-o" is-link to="index" />
			<van-cell title="我的星币" value="" icon="gem-o" is-link to="index" />
			<van-cell title="帮助中心" value="" icon="question-o" is-link to="/help" />
			<van-cell title="关于我们" value="" icon="warning-o" is-link to="index" />
		</div>
		
	</div>
</template>

<script>
	export default {
	  data(){
		  return{
			xb:0,
			follow:20,
			fans:30,
			images:[//记录轮播的图片信息
					  {
						  id:1,
						  url:"/about",
						  imgurl:"https://img01.yzcdn.cn/vant/apple-1.jpg"
					  },{
						  id:2,
						  url:"",
						  imgurl:"https://img01.yzcdn.cn/vant/apple-2.jpg"
					  },{
						  id:3,
						  url:"",
						  imgurl:"https://img01.yzcdn.cn/vant/apple-1.jpg"
					  },{
						  id:4,
						  url:"",
						  imgurl:"https://img01.yzcdn.cn/vant/apple-2.jpg"
					  }
					]
		  }
	  },
	  methods:{
		  coins(){
			  this.$router.push("/about");
		  },
		  gz(){
			  this.$router.push("/about");
		  },
		  fs(){
		  	  this.$router.push("/about");
		  }
	  }
	}
</script>

<style>
	 .my-swipe .van-swipe-item {
	    color: #fff;
	    font-size: 20px;
	    line-height: 100px;
	    text-align: center;
	    background-color: #39a9ed;
		border-radius:15px;
	  }
	  .line{
		margin:20px 10px 15px 10px;
		clear: right;
	  }
	  .top{
		  width: 100%;
		  height: 20%;
	  }
	  .name{
		  font-size: 30px;
		  font-family:"黑体";
		  text-align: left;
		  margin-left: 20px;
	  }
	  .lbimg{
	  	width: 50%;
	  	height: 100px;
	  }
</style>
